<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
      <el-form-item label="操作时间">
        <el-form-item label-width="0px">
          <el-date-picker style="width:140px" v-model="queryParams.createTimeStart" type="date" placeholder="开始时间" value-format="YYYY-MM-DD" :disabled-date="startDisabledDate"/>
        </el-form-item>
        <span class="spanStyle">至</span> 
        <el-form-item>
          <el-date-picker style="width:140px"  v-model="queryParams.createTimeEnd" type="date" placeholder="结束时间" value-format="YYYY-MM-DD" :disabled-date="endDisabledDate"/>
        </el-form-item>
      </el-form-item>
      <el-form-item label="操作" prop="opType">
        <el-select v-model="queryParams.opType" placeholder="请选择" clearable style="width:300px;">
          <el-option v-for="item in [{ value: '', label: '全部' },{ value: 1, label: '保存新版本' }, { value: 2, label: '覆盖旧版本' },{ value: 3, label: '删除' }]" :key="item.dictItemId" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键词" prop="keyword">
        <el-input style="width:300px" v-model="queryParams.keyword" placeholder="请输入关键词" clearable />
      </el-form-item>
    
      <el-form-item style="margin-left: 40px;">
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" ref="tableRef" :data="dataList" stripe>
      <el-table-column label="操作时间" align="center" prop="createTime" />
      <el-table-column label="操作人" align="center" prop="createUser" />
      <el-table-column label="操作" align="center" prop="opType">
        <template #default="scope">
          <span v-if="scope.row.opType==1">保存新版本</span>
          <span v-if="scope.row.opType==2">覆盖旧版本</span>
          <span v-if="scope.row.opType==3">删除</span>
        </template>
      </el-table-column>>
      <el-table-column label="操作详情" align="center" prop="opDetail" />
      <el-table-column label="说明" align="center" prop="opDesc" />
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
      @pagination="getList" />
  </div>
</template>

<script setup>
import { list } from '@/api/operatingRecord.js'
const { proxy } = getCurrentInstance();
const dataList = ref([]);
const loading = ref(false);
const total = ref(0);
const data = reactive({
  queryParams: {
    page: 1,
    rows: 10,
    createTimeStart: '',
    createTimeEnd: '',
    opType: '',
    keyword: '',
  },
})
const { queryParams, } = toRefs(data);

const startDisabledDate = (time) => {
  if (queryParams.value.createTimeEnd) {
    return time.getTime() > new Date(queryParams.value.createTimeEnd).getTime();
  }
  return false;
};
const endDisabledDate = (time) => {
  if (queryParams.value.createTimeStart) {
    return time.getTime() < new Date(queryParams.value.createTimeStart).getTime();
  }
  return false;
};

// 监听开始时间和结束时间的变化，更新对应的 disabledDate 函数
watch(queryParams.value.createTimeStart, (newVal) => {
  // 当开始时间改变时，更新结束时间的选择范围
  endDisabledDate(newVal);
});

watch(queryParams.value.createTimeEnd, (newVal) => {
  // 当结束时间改变时，更新开始时间的选择范围
  startDisabledDate(newVal);
});

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.page = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  queryParams.value = {
    page: 1,
    rows: 10,
    createTimeStart: '',
    createTimeEnd: '',
    opType: '',
    keyword: '',
  },
    dataList.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 查询数据列表 */
function getList() {
  loading.value = true;
  list({...queryParams.value}).then(response => {
    dataList.value = response.data.list ? response.data.list : [];
    total.value = response.data.total;
    loading.value = false;
    // getVersionCodes();
  });
}

getList();
</script>

<style lang="scss" scoped>
:deep(.el-drawer__header) {
  margin-bottom: 0px !important;
}

.el-form--inline .el-form-item{
  margin-right: 0px!important;
}
.spanStyle{
  display: inline-block;
  width: 20px;
  text-align: center;
}
</style>
